<script>
import {Plus, Promotion, Star} from "@element-plus/icons-vue";
import {ElMessage} from "element-plus";
export default{
  computed: {
    Promotion() {
      return Promotion
    },
  },
  components: {Plus, Star},
  data(){
    return{
      goodsinfo:{
      address:'',
      category_id:'',
      user_id:'',
      goods_name:'',
      goods_description:'',
      goods_image:'',
      goods_id:'',
      goods_price:'',
      goods_stock:1,
      },
      categoryData:[],
      userData:{},
    }
  },
  methods:{
    LoadUserData(){
      this.goodsinfo.user_id=localStorage.getItem('user_id')
      this.$http.get("http://localhost:8080/user/showdetailuserinfo",{params:{
        user_id:this.goodsinfo.user_id
        }}).then((res)=>{
        this.userData = res.data
        console.log(this.userData);
      }).catch(function(err){
        console.log(err);
      })
    },
    LoadCategoryData(){
      this.$http.get("http://localhost:8080/category/all").then((res)=>{
        this.categoryData = res.data
        console.log(this.categoryData);
      }).catch(function(err){
        console.log(err);
      })
    },
    btnPost(){
      console.log(this.goodsinfo);
      this.$http.post("http://localhost:8080/goods/post",this.goodsinfo).then((res)=>{
        console.log(res.data);
        if(res.data===1){
          console.log("添加成功！");
          ElMessage({
            message:'添加成功！',
            type:'success',
          })
          this.goodsinfo.goods_stock=''
          this.goodsinfo.goods_price=''
          this.goodsinfo.goods_description=''
          this.goodsinfo.goods_image=''
          this.goodsinfo.category_id=''
          this.goodsinfo.goods_name=''
          this.goodsinfo.goods_id=''
        }else{
          ElMessage({
            message:'添加失败！',
            type:'danger',
          })
          console.log("添加失败！");
        }
      }).catch(function(err){
        console.log(err);
      })
    },
    handleChange(){
    },
    handleSuccess(response) {
      // 上传图片成功后的回调
      console.log(response);
      this.goodsinfo.goods_image=response
    },
  },
  mounted() {
    this.LoadCategoryData();
    this.LoadUserData();
  }
}
</script>
<template>
  <el-card>
    <template #header>
      <div class="card-header" style="text-align: center;">
    <span>
      <h2 class="card-title" style="margin: 0; color: #79bbff; font-size: 24px; font-weight: bold; animation: fadeIn 2s ease-in-out;">发布闲置</h2>
    </span>
      </div>
    </template>
    <el-row style="border: none;">
      <el-col :span="10" style="display: block;border: none;">
        <div style="font-size: 14px;">卖家ID：</div>
        <br/>
        <el-input v-model="goodsinfo.user_id"
                  style="width: 300px;"
                  disabled
        />
      </el-col>
      <el-col :span="7">
        <div style="font-size: 14px;">商品类别：</div>
        <br/>
        <el-select v-model="goodsinfo.category_id" placeholder="请选择商品类别" style="width:300px" clearable>
          <el-option
              v-for="item in categoryData"
              :key="item.category_id"
              :label="item.category_name"
              :value="item.category_id"
          />
        </el-select>
      </el-col>
      <el-col :span="7">
        <div style="font-size: 14px;">商品名称：</div>
        <br/>
        <el-input v-model="goodsinfo.goods_name"
                  placeholder="商品名称"
                  style="width: 300px;"
        clearable/>
      </el-col>
    </el-row>
    <el-divider border-style="dashed" />
    <el-row>
      <el-col :span="10">
        <div style="font-size: 14px;">商品描述（文字）：</div>
        <br/>
        <el-input
            v-model="goodsinfo.goods_description"
            type="textarea"
            style="width: 300px;"
            maxlength="50"
            :rows="5"
            show-word-limit
            placeholder="--限50字内--"
        clearable/>
      </el-col>
      <el-col :span="7">
        <div style="font-size: 14px;">商品描述（图片）：</div>
        <br/>
        <el-upload
            list-type="picture-card"
            action="http://localhost:8080/goods/upload"
            :show-file-list="false"
            :on-success="handleSuccess"
        >
          <img v-if="goodsinfo.goods_image" :src="'http://localhost:8080/image/upload/'+goodsinfo.goods_image" class="avatar"  alt=""/>
          <el-icon v-else class="avatar-uploader-icon"><Plus/></el-icon>
        </el-upload>
      </el-col>
      <el-col :span="7">
      </el-col>
    </el-row>
    <el-divider border-style="dashed" />
    <el-row>
      <el-col :span="10">
        <div style="font-size: 14px;">发货地址：</div>
        <br/>
        <el-input v-model="userData.address"
                  style="width: 300px;"
                  disabled/>
      </el-col>
      <el-col :span="7">
        <div style="font-size: 14px;">商品价格：</div>
        <br/>
        <el-input
            v-model="goodsinfo.goods_price"
            style="width: 240px"
            placeholder="请输入"
            clearable
        >
        </el-input>
      </el-col>
      <el-col :span="7">
        <div style="font-size: 14px;">商品数量：</div>
        <br/>
        <el-input-number v-model="goodsinfo.goods_stock" :min="1" :max="10" @change="handleChange"/>
      </el-col>
    </el-row>
    <br/><br/>
    <el-divider>
      <el-icon><Star /></el-icon>
    </el-divider>
    <br/>
    <div style="text-align: center;">
      <el-button round color="#79bbff" size="large" type="primary" :icon="Promotion" @click="btnPost">发布</el-button></div>
  </el-card>
</template>

<style scoped>
.avatar {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
}
</style>
<style>
.avatar-uploader-icon {
  color: #79bbff;
  width: 80px;
  height: 80px;
  text-align: center;
}
</style>